import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import {getMovieAction} from '../../store/slice/movieSlice'

export default function Movie() {
  const dispatch = useDispatch()
  const count = useSelector((state) => state.count.count)
  const movieList = useSelector((state) => state.movie.movieList)
  
  const getMovieHandle = () => {
    dispatch(getMovieAction())
  }

  return (
    <div>
      <h1>我是Movie组件</h1>
      <p>我收到的Count组件的值是 { count }</p>
      <p>我的电影是{ movieList.length }条</p>
      <button onClick={getMovieHandle}>获取电影的数据</button>
      <ul>
        {
          movieList.map(item => {
            return <li key={item.tvId}>{item.albumName}<p>{item.focus}</p></li>
          })
        }
      </ul>
    </div>
  )
}
